<template>
	<view class="deliveryRecord-page">
		<div class="tab">
			<div @click="() =>onClickTab(index)" :class="{'tab-item': true,'tab-item-active': index == active } "
				v-for="(item,index) in tabs">{{item}}</div>
		</div>
		<div class="list">
			<div class="item" @click="() => onClickDetail(item)" v-for="(item,index) in list" :key="index">
				<div class="item-title">
					<div class="info">
						<image :src="item.company_header" mode=""></image>
						<span>{{item.company_name}}</span>
					</div>
					<div class="price">{{item.salary}}</div>
				</div>
				<div class="post">
					<span>{{item.name}}</span>
					<p>{{item.company_city}}</p>
				</div>
				<div class="bottom">
					<div class="labels">
						<div class="label" v-for="(label,key) in item.show_tag" :key="key">{{label.name}}</div>
					</div>
					<div class="address">{{handleStatus(item.status)}}</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['全部', '待查看', '已查看', '待面试', '已完成'],
				active: '',
				page: 1,
				list: [],
			};
		},
		onLoad() {
			this.getDelivery()
		},
		computed: {
			handleStatus() {
				return (status) => this.tabs[status + 1]
			}
		},
		methods: {
			onClickTab(index) {
				this.active = index
				this.page = 1
				this.list = []
				this.getDelivery()
			},
			async getDelivery() {
				let status = (this.active - 1) < 0 ? '': (this.active - 1)
				console.log(status)
				const {data} = await this.$http.User.getDelivery({ page: this.page, status})
				if(data.data.length > 0) this.page += 1
				this.list = [...this.list, ...data.data]
				// this.list = data.data
			},
			onClickDetail({ company_id }) {
				uni.navigateTo({
					url:"/pages/index/detail?id=" + company_id
				})
			}
		},
		onReachBottom() {
			this.getDelivery()
		}
	}
</script>

<style lang="less" scoped>
	.deliveryRecord-page {
		.tab {

			padding: 0 32upx;
			padding-top: 28upx;
			display: flex;
			align-items: center;

			.tab-item {
				min-width: 74upx;
				color: #666E7A;
				font-size: 24upx;
				font-weight: 500;
				text-align: center;
				height: 44upx;
				line-height: 44upx;
				position: relative;
				margin-right: 78upx;

			}

			.tab-item-active {

				&::after {
					content: '';
					position: absolute;
					bottom: -6upx;
					left: 50%;
					transform: translateX(-50%);
					height: 6upx;
					background: #2AABE2;
					border-radius: 2upx;
					width: 30upx;
				}
			}
		}

		.list {
			padding: 0 32upx;
			.item {
				padding-top: 32upx;
				border-bottom: 1px solid #EEEEEE;
				padding-bottom: 32upx;
				background: #fff;
				border-radius: 8upx;
				margin-bottom: 20upx;

				&:last-of-type {
					border-bottom: unset;
				}

				.item-title {
					display: flex;
					align-items: center;

					.info {
						display: flex;
						align-items: center;
						flex: 1;

						image {
							margin-right: 22upx;
							width: 40upx;
							height: 40upx;
							border-radius: 40upx;
						}

						span {
							color: #666E7A;
							font-size: 24upx;
							font-weight: 400;
						}
					}

					.price {
						color: #2AABE2;
						font-size: 28upx;
						font-weight: 600;
					}
				}

				.post {
					display: flex;
					flex-direction: column;

					span {
						margin-top: 24upx;
						font-size: 28upx;
						color: #28211F;
						font-weight: 600;
					}

					p {
						font-size: 24upx;
						color: #666E7A;
						font-weight: 400;
						margin-top: 20upx;
					}
				}

				.bottom {
					display: flex;
					align-items: center;
					margin-top: 16upx;

					.labels {
						flex: 1;
						display: flex;
						align-items: center;

						.label {
							border-radius: 4upx;
							margin-right: 16upx;
							padding: 0 16upx;
							background: #F2F2F2;
							height: 44upx;
							line-height: 44upx;
							font-size: 24upx;
							color: #666;
							font-weight: 400;
						}
					}

					.address {
						color: #666E7A;
						font-size: 22upx;
						font-weight: 400;
					}
				}
			}
		}
	}
</style>
